<script setup lang="ts">
import type { Props, Emits } from './utils/types'
import { ElMessage, ElLoading } from 'element-plus'
import APIInformation from '@/api/information'
import { useAuth } from '@/stores/index'

const dialogVisible = shallowRef(false)
const $props = defineProps<Props>()
const $emit = defineEmits<Emits>()
const { getInfo } = useAuth()

watch($props, (newValue) => {
    dialogVisible.value = newValue.modelValue
}, { immediate: true })

watch(dialogVisible, (newValue) => {
    $emit('update:modelValue', newValue)
})

const formData = ref<any>({})

function onBeforeClose() {
    formData.value = {}
    dialogVisible.value = false
}


function submitChangePassword() {
    const test = /^(?![\d]+$)(?![a-z]+$)(?![A-Z]+$)(?![\W_]+$)[\da-zA-z\W_]{6,20}$/
    if (!formData.value.password) return ElMessage.error('请输入设置密码')
    if (!test.test(formData.value.password)) return ElMessage.error('输入长度6-12个至少使用数字、英文、符号中的两种组合的字符')
    if (!formData.value.repassword) return ElMessage.error('请输入确认密码')
    if (!(formData.value.password == formData.value.repassword)) return ElMessage.error('密码和确认密码不一致')
    const loading = ElLoading.service({ lock: true })
    APIInformation.changePersonal({ password: formData.value.password }).then(({ msg }) => {
        ElMessage.success(msg)
        getInfo()
        onBeforeClose()
    }).finally(() => {
        loading.close()
    })

}

</script>

<template>
    <el-dialog class="edit-username" v-model="dialogVisible" title="设置密码" width="800" destroy-on-close
        :before-close="onBeforeClose" :show-close="false">
        <template #header>
            <DialogClose title="设置密码" @close="onBeforeClose" />
        </template>
        <div class="con">
            <div class="con-item">
                <div class="label">设置密码：</div>
                <el-input class="value" type="password" v-model="formData.password" size="large" show-password
                    placeholder="输入长度6-12个至少使用数字、英文、符号中的两种组合的字符" />
            </div>
            <div class="con-item">
                <div class="label">确认密码：</div>
                <el-input class="value" type="password" v-model="formData.repassword" size="large" show-password
                    placeholder="输入相同的密码" />
            </div>
            <button type="button" class="submit-btn" @click="submitChangePassword">确认</button>
        </div>
    </el-dialog>
</template>

<style lang="scss" scoped>
.edit-username {
    .con {
        display: flex;
        flex-direction: column;
        padding-top: 20px;
        padding-bottom: 40px;

        .con-item {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0;

            .value {
                width: 535px;
            }
        }

        .submit-btn {
            display: block;
            margin: 0 auto;
            margin-top: 42px;
            width: 231px;
            height: 40px;
            border-radius: 5px;
            background-color: rgba(15, 64, 245, 1);
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
            border: none;
            cursor: pointer;
        }
    }
}
</style>
